<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element UI el-table 综合样例</title>
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <link rel="stylesheet" href="/js/element-ui/element-ui.css">
    <script src="/js/vue.min.js"></script>
    <script src="/js/element-ui/element-ui.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        header {
            text-align: center;
            padding: 30px 0;
            color: white;
            margin-bottom: 30px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        header h1 {
            font-size: 3rem;
            margin-bottom: 15px;
            background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline-block;
        }
        header p {
            font-size: 1.2rem;
            max-width: 800px;
            margin: 0 auto;
            opacity: 0.9;
            line-height: 1.6;
        }
        .tabs {
            display: flex;
            justify-content: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 10px;
        }
        .tab-btn {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }
        .tab-btn:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .tab-btn.active {
            background: linear-gradient(to right, #12c2e9, #c471ed);
            color: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            margin-bottom: 30px;
            transition: transform 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
        }
        .card-header {
            background: linear-gradient(to right, #4b6cb7, #182848);
            color: white;
            padding: 20px;
            font-size: 1.4rem;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .card-body {
            padding: 25px;
        }
        .table-controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        .table-container {
            overflow-x: auto;
        }
        .custom-table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .custom-table .el-table th {
            background: linear-gradient(to bottom, #f5f7fa, #e4e7ed);
            color: #2c3e50;
            font-weight: bold;
        }
        .custom-table .el-table__row:hover td {
            background-color: #f0f9ff !important;
        }
        .feature-section {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 40px;
        }
        .feature-card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .feature-card h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4b6cb7;
        }
        .feature-card ul {
            padding-left: 20px;
        }
        .feature-card li {
            margin-bottom: 10px;
            line-height: 1.6;
        }
        .footer {
            text-align: center;
            color: white;
            padding: 30px 0;
            margin-top: 30px;
            font-size: 0.9rem;
            opacity: 0.9;
        }
        .status-tag {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
        }
        .status-active {
            background-color: #e1f3d8;
            color: #67c23a;
        }
        .status-pending {
            background-color: #faecd8;
            color: #e6a23c;
        }
        .status-inactive {
            background-color: #fde2e2;
            color: #f56c6c;
        }
        .pagination-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        @media (max-width: 768px) {
            .table-controls {
                flex-direction: column;
            }
            .table-controls .el-input {
                width: 100%;
            }
            header h1 {
                font-size: 2.2rem;
            }
        }
        .demo-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            background: linear-gradient(45deg, #12c2e9, #c471ed);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>Element UI el-table 综合样例</h1>
                <p>通过CDN引入Vue2和Element UI，展示el-table的各种功能和样式</p>
            </header>
            
            <div class="tabs">
                <button class="tab-btn active">基础表格</button>
                <button class="tab-btn">多级表头</button>
                <button class="tab-btn">自定义列</button>
                <button class="tab-btn">展开行</button>
                <button class="tab-btn">分页表格</button>
            </div>
            
            <!-- 基础表格示例 -->
            <div class="card">
                <div class="card-header">
                    基础表格（斑马纹 + 边框 + 状态）
                    <el-tag type="success">常用</el-tag>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <el-table
                            class="custom-table"
                            :data="tableData"
                            stripe
                            border
                            style="width: 100%">
                            <el-table-column
                                prop="name"
                                label="姓名"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="日期"
                                sortable
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="address"
                                label="地址">
                            </el-table-column>
                            <el-table-column
                                prop="status"
                                label="状态"
                                width="120">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status === 'active'" class="status-tag status-active">活跃</div>
                                    <div v-else-if="scope.row.status === 'pending'" class="status-tag status-pending">待处理</div>
                                    <div v-else class="status-tag status-inactive">未激活</div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                width="180">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            
            <!-- 多级表头表格 -->
            <div class="card">
                <div class="card-header">
                    多级表头表格
                    <el-tag type="warning">高级</el-tag>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <el-table
                            class="custom-table"
                            :data="productData"
                            style="width: 100%"
                            height="350">
                            <el-table-column
                                prop="name"
                                label="产品名称"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="category"
                                label="类别"
                                width="120">
                            </el-table-column>
                            <el-table-column label="销售信息">
                                <el-table-column
                                    prop="price"
                                    label="价格"
                                    sortable
                                    width="120">
                                    <template slot-scope="scope">
                                        ¥{{ scope.row.price.toFixed(2) }}
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="stock"
                                    label="库存"
                                    sortable
                                    width="120">
                                </el-table-column>
                                <el-table-column
                                    prop="sales"
                                    label="销量"
                                    sortable
                                    width="120">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column label="评价">
                                <el-table-column
                                    prop="rating"
                                    label="评分"
                                    sortable
                                    width="120">
                                    <template slot-scope="scope">
                                        <el-rate
                                            v-model="scope.row.rating"
                                            disabled
                                            show-score
                                            text-color="#ff9900"
                                            score-template="{value}">
                                        </el-rate>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="reviews"
                                    label="评论数"
                                    sortable
                                    width="120">
                                </el-table-column>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            
            <!-- 自定义列模板 -->
            <div class="card">
                <div class="card-header">
                    自定义列模板（图片 + 标签）
                    <el-tag type="primary">实用</el-tag>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <el-table
                            class="custom-table"
                            :data="userData"
                            style="width: 100%">
                            <el-table-column
                                label="用户"
                                width="200">
                                <template slot-scope="scope">
                                    <div style="display: flex; align-items: center;">
                                        <div class="demo-image">{{ scope.row.name.charAt(0) }}</div>
                                        <div style="margin-left: 15px;">
                                            <div style="font-weight: bold;">{{ scope.row.name }}</div>
                                            <div style="color: #999; font-size: 0.9rem;">{{ scope.row.email }}</div>
                                        </div>
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="role"
                                label="角色"
                                width="180">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.role === 'admin'" type="danger">管理员</el-tag>
                                    <el-tag v-else-if="scope.row.role === 'editor'" type="warning">编辑</el-tag>
                                    <el-tag v-else type="success">普通用户</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="lastLogin"
                                label="最后登录"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="ip"
                                label="登录IP"
                                width="150">
                            </el-table-column>
                            <el-table-column
                                label="状态"
                                width="120">
                                <template slot-scope="scope">
                                    <el-switch
                                        v-model="scope.row.active"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949">
                                    </el-switch>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            
            <!-- 分页表格 -->
            <div class="card">
                <div class="card-header">
                    分页表格 + 筛选
                    <el-tag type="info">常用</el-tag>
                </div>
                <div class="card-body">
                    <div class="table-controls">
                        <el-input
                            placeholder="搜索订单..."
                            v-model="orderSearch"
                            clearable
                            style="width: 300px;">
                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                        </el-input>
                        <el-button type="primary" icon="el-icon-refresh" @click="refreshOrders">刷新数据</el-button>
                    </div>
                    
                    <div class="table-container">
                        <el-table
                            class="custom-table"
                            :data="paginatedOrders"
                            style="width: 100%"
                            stripe
                            v-loading="orderLoading">
                            <el-table-column
                                prop="id"
                                label="订单ID"
                                width="120">
                            </el-table-column>
                            <el-table-column
                                prop="product"
                                label="产品名称"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="customer"
                                label="客户"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="date"
                                label="日期"
                                sortable
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="amount"
                                label="金额"
                                sortable
                                width="120">
                                <template slot-scope="scope">
                                    ¥{{ scope.row.amount.toFixed(2) }}
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="status"
                                label="状态"
                                width="150"
                                :filters="[
                                    { text: '已完成', value: 'completed' },
                                    { text: '处理中', value: 'processing' },
                                    { text: '已取消', value: 'cancelled' }
                                ]"
                                :filter-method="filterStatus">
                                <template slot-scope="scope">
                                    <el-tag v-if="scope.row.status === 'completed'" type="success">已完成</el-tag>
                                    <el-tag v-else-if="scope.row.status === 'processing'" type="warning">处理中</el-tag>
                                    <el-tag v-else type="danger">已取消</el-tag>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    
                    <div class="pagination-container">
                        <el-pagination
                            background
                            layout="prev, pager, next, sizes, total"
                            :total="filteredOrders.length"
                            :page-sizes="[5, 10, 20]"
                            :page-size="pageSize"
                            :current-page.sync="currentPage"
                            @size-change="handleSizeChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
            
            <!-- 展开行表格 -->
            <div class="card">
                <div class="card-header">
                    展开行表格
                    <el-tag type="success">高级</el-tag>
                </div>
                <div class="card-body">
                    <div class="table-container">
                        <el-table
                            class="custom-table"
                            :data="projectData"
                            style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <p>项目描述: {{ props.row.description }}</p>
                                    <p>团队成员: 
                                        <el-tag v-for="member in props.row.team" :key="member" type="info" style="margin-right: 5px; margin-bottom: 5px;">
                                            {{ member }}
                                        </el-tag>
                                    </p>
                                    <p>技术栈: 
                                        <el-tag v-for="tech in props.row.technologies" :key="tech" type="success" style="margin-right: 5px; margin-bottom: 5px;">
                                            {{ tech }}
                                        </el-tag>
                                    </p>
                                </template>
                            </el-table-column>
                            <el-table-column
                                prop="name"
                                label="项目名称"
                                width="200">
                            </el-table-column>
                            <el-table-column
                                prop="manager"
                                label="负责人"
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="startDate"
                                label="开始日期"
                                sortable
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="endDate"
                                label="截止日期"
                                sortable
                                width="180">
                            </el-table-column>
                            <el-table-column
                                prop="progress"
                                label="进度"
                                width="180">
                                <template slot-scope="scope">
                                    <el-progress :percentage="scope.row.progress" :color="customColors"></el-progress>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
            
            <div class="feature-section">
                <div class="feature-card">
                    <h3>el-table 核心功能</h3>
                    <ul>
                        <li><strong>数据展示</strong>：高效展示结构化数据</li>
                        <li><strong>排序功能</strong>：支持单列或多列排序</li>
                        <li><strong>筛选功能</strong>：自定义列筛选条件</li>
                        <li><strong>分页支持</strong>：轻松实现数据分页</li>
                        <li><strong>自定义模板</strong>：灵活定制单元格内容</li>
                        <li><strong>固定表头/列</strong>：支持大数据量滚动查看</li>
                        <li><strong>展开行</strong>：展示行详情信息</li>
                    </ul>
                </div>
                
                <div class="feature-card">
                    <h3>常用属性</h3>
                    <ul>
                        <li><strong>data</strong>：表格数据源</li>
                        <li><strong>stripe</strong>：斑马纹样式</li>
                        <li><strong>border</strong>：表格边框</li>
                        <li><strong>height</strong>：固定表格高度</li>
                        <li><strong>row-class-name</strong>：行样式回调</li>
                        <li><strong>v-loading</strong>：加载状态</li>
                        <li><strong>default-sort</strong>：默认排序方式</li>
                    </ul>
                </div>
                
                <div class="feature-card">
                    <h3>最佳实践</h3>
                    <ul>
                        <li>大数据量使用分页或虚拟滚动</li>
                        <li>复杂表格使用多级表头组织信息</li>
                        <li>重要操作放在操作列中</li>
                        <li>使用标签和颜色区分不同状态</li>
                        <li>为表格添加筛选和搜索功能</li>
                        <li>使用加载状态提升用户体验</li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>Element UI el-table 综合样例 | 通过CDN引入Vue2和Element UI | {{ new Date().getFullYear() }}</p>
        </div>
    </div>

    <script>
        // 使用Element UI
        Vue.use(ELEMENT);
        
        new Vue({
            el: '#app',
            data: {
                // 基础表格数据
                tableData: [
                    { name: '张三', date: '2023-06-15', address: '北京市海淀区中关村大街1号', status: 'active' },
                    { name: '李四', date: '2023-07-20', address: '上海市浦东新区张江高科技园区', status: 'pending' },
                    { name: '王五', date: '2023-05-10', address: '广州市天河区珠江新城', status: 'inactive' },
                    { name: '赵六', date: '2023-08-05', address: '深圳市南山区科技园', status: 'active' },
                    { name: '钱七', date: '2023-04-18', address: '杭州市西湖区文三路', status: 'active' }
                ],
                
                // 多级表头数据
                productData: [
                    { name: 'iPhone 14 Pro', category: '手机', price: 8999, stock: 150, sales: 420, rating: 4.8, reviews: 125 },
                    { name: 'MacBook Pro 16"', category: '笔记本电脑', price: 18999, stock: 75, sales: 210, rating: 4.9, reviews: 89 },
                    { name: 'AirPods Pro', category: '耳机', price: 1999, stock: 300, sales: 850, rating: 4.7, reviews: 342 },
                    { name: 'iPad Pro', category: '平板电脑', price: 6799, stock: 120, sales: 380, rating: 4.8, reviews: 156 },
                    { name: 'Apple Watch Series 8', category: '智能手表', price: 3199, stock: 200, sales: 520, rating: 4.6, reviews: 278 }
                ],
                
                // 自定义列数据
                userData: [
                    { name: '张三', email: 'zhangsan@example.com', role: 'admin', lastLogin: '2023-08-15 14:30', ip: '192.168.1.101', active: true },
                    { name: '李四', email: 'lisi@example.com', role: 'editor', lastLogin: '2023-08-14 09:45', ip: '192.168.1.102', active: true },
                    { name: '王五', email: 'wangwu@example.com', role: 'user', lastLogin: '2023-08-12 16:20', ip: '192.168.1.103', active: false },
                    { name: '赵六', email: 'zhaoliu@example.com', role: 'editor', lastLogin: '2023-08-15 11:10', ip: '192.168.1.104', active: true },
                    { name: '钱七', email: 'qianqi@example.com', role: 'user', lastLogin: '2023-08-10 13:25', ip: '192.168.1.105', active: true }
                ],
                
                // 分页表格数据
                orderData: [
                    { id: 'ORD001', product: 'iPhone 14 Pro', customer: '张三', date: '2023-08-10', amount: 8999, status: 'completed' },
                    { id: 'ORD002', product: 'MacBook Pro 16"', customer: '李四', date: '2023-08-11', amount: 18999, status: 'processing' },
                    { id: 'ORD003', product: 'AirPods Pro', customer: '王五', date: '2023-08-12', amount: 1999, status: 'completed' },
                    { id: 'ORD004', product: 'iPad Pro', customer: '赵六', date: '2023-08-13', amount: 6799, status: 'processing' },
                    { id: 'ORD005', product: 'Apple Watch', customer: '钱七', date: '2023-08-14', amount: 3199, status: 'completed' },
                    { id: 'ORD006', product: 'iMac 24"', customer: '孙八', date: '2023-08-15', amount: 10999, status: 'cancelled' },
                    { id: 'ORD007', product: 'HomePod mini', customer: '周九', date: '2023-08-16', amount: 749, status: 'processing' },
                    { id: 'ORD008', product: 'Magic Keyboard', customer: '吴十', date: '2023-08-17', amount: 1049, status: 'completed' },
                    { id: 'ORD009', product: 'Apple Pencil', customer: '郑十一', date: '2023-08-18', amount: 799, status: 'processing' },
                    { id: 'ORD010', product: 'Mac mini', customer: '王十二', date: '2023-08-19', amount: 5299, status: 'completed' }
                ],
                
                // 展开行数据
                projectData: [
                    { name: '企业官网改版', manager: '张三', startDate: '2023-06-01', endDate: '2023-09-30', progress: 65, 
                      description: '公司官方网站的全面升级改版项目，提升用户体验和品牌形象', 
                      team: ['张三', '李四', '王五'], 
                      technologies: ['Vue.js', 'Element UI', 'Node.js'] },
                    { name: '移动支付系统', manager: '李四', startDate: '2023-07-15', endDate: '2023-12-31', progress: 30, 
                      description: '新一代移动支付平台开发，支持多种支付方式和安全验证', 
                      team: ['李四', '赵六', '钱七', '孙八'], 
                      technologies: ['React Native', 'Spring Boot', 'MySQL'] },
                    { name: '数据可视化平台', manager: '王五', startDate: '2023-05-10', endDate: '2023-10-15', progress: 85, 
                      description: '企业级数据分析和可视化平台，提供实时数据监控和报表生成', 
                      team: ['王五', '周九', '吴十'], 
                      technologies: ['ECharts', 'Vue.js', 'Python', 'MongoDB'] },
                    { name: '智能客服系统', manager: '赵六', startDate: '2023-08-01', endDate: '2024-02-28', progress: 15, 
                      description: '基于人工智能的智能客服解决方案，提供24/7客户支持', 
                      team: ['赵六', '郑十一', '王十二'], 
                      technologies: ['NLP', 'Python', 'Vue.js', 'WebSocket'] }
                ],
                
                // 分页相关数据
                orderSearch: '',
                currentPage: 1,
                pageSize: 5,
                orderLoading: false,
                
                // 进度条自定义颜色
                customColors: [
                    { color: '#f56c6c', percentage: 30 },
                    { color: '#e6a23c', percentage: 70 },
                    { color: '#67c23a', percentage: 100 }
                ]
            },
            computed: {
                // 过滤后的订单数据
                filteredOrders() {
                    if (!this.orderSearch) return this.orderData;
                    
                    const search = this.orderSearch.toLowerCase();
                    return this.orderData.filter(order => 
                        order.id.toLowerCase().includes(search) ||
                        order.product.toLowerCase().includes(search) ||
                        order.customer.toLowerCase().includes(search)
                    );
                },
                
                // 分页后的订单数据
                paginatedOrders() {
                    const start = (this.currentPage - 1) * this.pageSize;
                    const end = start + this.pageSize;
                    return this.filteredOrders.slice(start, end);
                }
            },
            methods: {
                // 编辑行
                handleEdit(index, row) {
                    this.$message.info(`编辑: ${row.name}`);
                },
                
                // 删除行
                handleDelete(index, row) {
                    this.$confirm(`确定要删除 ${row.name} 吗?`, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.tableData.splice(index, 1);
                        this.$message.success('删除成功');
                    }).catch(() => {
                        this.$message.info('已取消删除');
                    });
                },
                
                // 状态筛选
                filterStatus(value, row) {
                    return row.status === value;
                },
                
                // 刷新订单数据
                refreshOrders() {
                    this.orderLoading = true;
                    setTimeout(() => {
                        this.orderLoading = false;
                        this.$message.success('数据已刷新');
                    }, 800);
                },
                
                // 改变每页显示数量
                handleSizeChange(val) {
                    this.pageSize = val;
                    this.currentPage = 1;
                }
            }
        });
    </script>
</body>
</html>